<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>客服</title>
    <link type="text/css" rel="styleSheet" href="css/css.css" />
    <link type="text/css" rel="styleSheet" href="css/emoji.css" />
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
    <script src="js/focus.js"></script>
</head>

<body>
    <div class="k-container">
        <div class="kefu-content">
            <!--        消息列表-->
            <div class="mes-list">
                <div class="mes-head">
                    <text class="mes-head-title">贷投狗</text>
                    <img src="image/kefu.png" class="logo" alt="">
                </div>
                <div class="menu-list">
                    <div class="mes-item active-item">
                        <img src="image/yonghu.png" class="yonghu-mes" alt="">
                        <div class="mes-item-con">
                            <div class="user-info">
                                <span class="user-name">陈灵灵</span>
                                <span class="user-time">17:32</span>
                            </div>
                            <div class="user-info">
                                <span class="user-con">向您咨询一下公积金代缴业务向您咨询一下公积金代缴业务向您咨询一下公积金代缴业务</span>
                                <div class="mes-num">12</div>
                            </div>

                        </div>
                    </div>

                    <div class="mes-item">
                        <img src="image/yonghu.png" class="yonghu-mes" alt="">
                        <div class="mes-item-con">
                            <div class="user-info">
                                <span class="user-name">陈灵灵</span>
                                <span class="user-time">17:32</span>
                            </div>
                            <div class="user-info">
                                <span class="user-con">向您咨询一下公积金代缴业务向您咨询一下公积金代缴业务向您咨询一下公积金代缴业务</span>
                                <div class="mes-num">12</div>
                            </div>

                        </div>
                    </div>
                    <div class="mes-item">
                        <img src="image/yonghu.png" class="yonghu-mes" alt="">
                        <div class="mes-item-con">
                            <div class="user-info">
                                <span class="user-name">陈灵灵</span>
                                <span class="user-time">17:32</span>
                            </div>
                            <div class="user-info">
                                <span class="user-con">向您咨询一下公积金代缴业务向您咨询一下公积金代缴业务向您咨询一下公积金代缴业务</span>
                                <div class="mes-num">12</div>
                            </div>

                        </div>
                    </div>


                </div>
            </div>
            <!--        内容-->
            <div class="dh-content">
                <!--            对话标题-->
                <div class="dh-title">陈灵灵</div>
                <!--            对话内容-->
                <div class="duihua-con">
                    <!--        时间-->
                    <div class="time">17：15</div>
                    <!--                用户-->
                    <div class="k-user-mes">
                        <img src="./image/yonghu.png" class="yonghu-k-u" alt="">
                        <div class="k-user-con">您好！</div>
                    </div>
                    <!--                客服-->
                    <div class="k-kmes">
                        <div class="k-k-container">
                            <span class="k-k-title">客服</span>
                            <div class="k-k-con">
                                亲，贷投狗为您提供房屋抵押，一、二抵,有无按揭均可贷，信用贷款、企业贷款、按揭赎楼、信用卡办理、公积金代缴、特价房源等。10年专业贷款服务，不动产金融超市，3万用户共同选择，快速为你解决贷款需求！
                            </div>
                        </div>
                        <img src="./image/kefu.png" class="k-k-img" alt="">
                    </div>

                </div>
                <!--            输入人内容-->
                <div class="dh-input">
                    <div contenteditable="true" class="con-textarea" placeholder="输入文字..."></div>
                    <!--                <textarea class="con-textarea" placeholder="输入文字..."></textarea>-->
                    <div class="btn-con">
                        <img class="bianji" src="image/bq.png" />
                        <div class="biaoqing">
                            <div class="kefu-send">发送</div>
                            <div class="kf-emoji-box"></div>
                        </div>

                    </div>
                </div>
            </div>
        </div>

    </div>

</body>

</html>
<script type="text/javascript">
    $(function () {
        //加载表情包
        for (let i = 0; i <= 31; i++) {
            $('.kf-emoji-box').append('<img src="image/kongbai.png" class="emoji" style=" background-position: ' + (i * -27) + 'px 0px;">');
        }
        //选择表情
        $('.kf-emoji-box .emoji').click(function (e) {
            let index = $(this).index();
            if (index < 31) {
                let i = $(this).clone()[0];
                console.log(i)
                // insertHtmlAtCursor(i.outerHTML)
                pasteHtmlAtCaret(i.outerHTML)
                // $('.con-textarea').append(i);
                // $('.con-textarea').focus();
                // keepLastIndex($('.con-textarea')[0])
            }

        })
        $('.con-textarea').click(function (e) {
            e.stopPropagation();
            $('.con-textarea').focus();
            hiddenMeoji();
        })
        //点击表情图标显示表情
        $('.bianji').click(function (e) {
            e.stopPropagation();
            showMeoji();
        })
        //其他区域隐藏表情
        $('.k-container').click(function () {
            hiddenMeoji();
        })
    })

    //隐藏表情包 n
    function hiddenMeoji() {
        $('.kf-emoji-box').css({
            'display': 'none'
        })
    };
    //显示表情包
    function showMeoji() {
        $('.kf-emoji-box').css({
            'display': 'block'
        })
    };






</script>